import React from 'react';
import moment from 'moment';
import { BellMuteOutline } from 'antd-mobile-icons';

import ChatAvatar from '../ChatAvatar';
import UnreadWarn from '../UnreadWarn';

import './style.scss';

const ChatInboxCard = (props) => {
  const { cid, type, innerPadding = '16px 20px', onCardClicked, topMode, sessionName, shieldMode, lastMsgSendTime, unReadCount, lastMsg, subAvatarUrl, logoUrl, extra, subUserIsConcern, singleSubUser } = props;
  let converName = type === "single" ? (singleSubUser?.nickName || singleSubUser?.userName|| singleSubUser?.userId) : sessionName;
  if(type === 'notify') {
    converName = '工作通知';
  }

  return (
    <div
      style={{ position: 'relative', padding: innerPadding}}
      key={cid}
      // onClick={onCardClicked}
    >
      <div className="chatInboxCarContainer" onClick={onCardClicked}>
        {topMode && <div className="topModeIcon" />}
        <div className="chatAvatarContainer">
          <ChatAvatar type={props.type} name={converName} avatar={ type === 'notify' ? 'https://gw.alipayobjects.com/mdn/rms_765f06/afts/img/A*t0ADTppRHdMAAAAAAAAAAAAAARQnAQ' : subAvatarUrl || logoUrl} />
        </div>
        <div className="cardBody">
          <div className="cardBodyLine">
            <span>
              <span className="cardName">{converName}</span>
            </span>
            <span className="cardBodyLineRight">
              {lastMsgSendTime ? <span className="cardTime">{moment(lastMsgSendTime || '').format('HH:mm')}</span> : null}
            </span>
          </div>
          <div className="cardBodyLineSmall">
            <span className="cardMessage">{ subUserIsConcern && <div className="specailConvert">[特别关注] </div> }{lastMsg}</span>
            <span className="cardBodyLineRight">
              {/* {isDefaultRead ?
                <svg t="1640877489862" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12199" width="20" height="20"><path d="M511.631 510.91m-445.605 0a445.605 445.605 0 1 0 891.21 0 445.605 445.605 0 1 0-891.21 0Z" fill="#EC7376" p-id="12200"></path><path d="M511.32 319.325c-105.418 0-191.182 85.764-191.182 191.182 0 105.417 85.764 191.181 191.182 191.181 105.417 0 191.181-85.764 191.181-191.181 0-105.419-85.764-191.182-191.181-191.182zM340.138 510.506c0-94.39 76.792-171.182 171.182-171.182 43.604 0 83.444 16.397 113.702 43.337L383.475 624.208c-26.94-30.257-43.337-70.098-43.337-113.702zM511.32 681.688c-43.604 0-83.445-16.397-113.702-43.337l241.547-241.547c26.94 30.258 43.337 70.098 43.337 113.702-0.001 94.39-76.793 171.182-171.182 171.182z" fill="#FFFFFF" p-id="12201"></path></svg>
                : null
              } */}
              { shieldMode && <BellMuteOutline /> }
              {(Number(unReadCount) > 0 )? <UnreadWarn unRead={ shieldMode ? 0 : Number(unReadCount)} /> : null}
              {extra}
            </span>
          </div>
        </div>
      </div>
      {/* {(editFunc && && type !== 'notify') ? <EditBtn>
          <Popover.Menu
            actions={[{ text: '历史消息设置已读', val: 'allRead' }, { text: '新消息默认已读', val: 'is_default_read' }]}
            onAction={node => editFunc(node)}
            placement='left'
            destroyOnHide={true}
            trigger='click'
          >
            <svg t="1640859526342" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5668" width="20" height="20"><path d="M925.013333 625.92l-66.133333-55.893333a329.813333 329.813333 0 0 0 5.12-58.026667 333.226667 333.226667 0 0 0-5.12-58.026667l66.133333-55.893333a32 32 0 0 0 8.96-34.986667v-2.986666A443.306667 443.306667 0 0 0 853.333333 223.146667v-2.986667a32 32 0 0 0-36.266666-6.826667l-81.92 29.013334a350.72 350.72 0 0 0-98.986667-58.026667l-16.213333-85.333333a30.72 30.72 0 0 0-26.026667-24.746667h-2.986667a466.773333 466.773333 0 0 0-157.866666 0h-2.986667a30.72 30.72 0 0 0-26.026667 24.746667l-16.213333 85.333333a349.866667 349.866667 0 0 0-98.986667 55.893333L206.933333 213.333333a32 32 0 0 0-36.266666 6.826667v2.986667a448 448 0 0 0-79.786667 136.96v2.986666a32 32 0 0 0 8.96 34.986667l66.133333 56.746667A426.666667 426.666667 0 0 0 160.853333 512a426.666667 426.666667 0 0 0 4.266667 57.173333l-66.133333 56.746667a31.573333 31.573333 0 0 0-8.96 34.986667A442.453333 442.453333 0 0 0 170.666667 800.853333l2.133333 2.133334a31.146667 31.146667 0 0 0 34.986667 9.813333l81.92-28.586667a358.826667 358.826667 0 0 0 98.986666 56.746667l16.213334 85.333333a30.72 30.72 0 0 0 26.026666 24.746667h2.986667a459.946667 459.946667 0 0 0 157.866667 0h2.986666a30.72 30.72 0 0 0 26.026667-24.746667l16.213333-85.333333a349.44 349.44 0 0 0 98.986667-57.6l81.92 28.586667a31.146667 31.146667 0 0 0 34.986667-9.813334l2.133333-2.133333a442.453333 442.453333 0 0 0 78.933333-137.813333 32 32 0 0 0-8.96-34.986667z m-136.106666-160a324.266667 324.266667 0 0 1 4.266666 46.08 336.64 336.64 0 0 1-4.266666 46.08l-6.826667 40.106667 75.093333 64a401.493333 401.493333 0 0 1-42.666666 73.813333l-92.16-32.853333-32 26.026666a294.826667 294.826667 0 0 1-78.933334 44.8l-37.973333 14.933334-18.773333 97.28a469.333333 469.333333 0 0 1-85.333334 0l-18.346666-98.133334-37.973334-14.08a289.706667 289.706667 0 0 1-78.933333-46.08l-30.72-26.026666-90.026667 34.133333a369.92 369.92 0 0 1-42.666666-73.813333L244.053333 597.333333l-7.253333-40.106666A388.266667 388.266667 0 0 1 232.96 512a419.413333 419.413333 0 0 1 3.84-46.08l7.253333-39.253333-75.946666-64.853334A347.733333 347.733333 0 0 1 213.333333 288l93.013334 32.853333 30.72-24.746666a279.04 279.04 0 0 1 76.8-46.08l37.973333-14.08 17.493333-98.133334a469.333333 469.333333 0 0 1 85.333334 0l17.92 97.28 37.973333 14.933334a262.4 262.4 0 0 1 78.933333 46.08l32 24.746666 92.16-32.853333a391.68 391.68 0 0 1 42.666667 73.813333L782.08 426.666667zM512 325.973333a176.213333 176.213333 0 1 0 176.213333 176.213334A175.786667 175.786667 0 0 0 512 325.973333z m78.933333 256a112.213333 112.213333 0 1 1 0-158.293333 110.933333 110.933333 0 0 1 0 158.293333z" p-id="5669" fill="#8a8a8a"></path></svg>
          </Popover.Menu>
        </EditBtn> : null} */}
    </div>
  );
}

export default ChatInboxCard;

